<template>
	<view>
		<uni-popup ref="popupBuy" type="bottom">
			<view class="buy_info">
				<image class="close_icon" src="/static/images/home/close.png" mode="" @click="colse"></image>
				<view class="shop_info">
					<image class="shop_info_icon" src="https://static.music.daoyintech.com/0769390a-272b-4952-bc59-06d67c7f70ddcert.jpg" mode="aspectFill"></image>
					<view class="info_">
						<text class="info_name_">美妆上新套装</text>
						<text class="info_describe_">洗面奶+水乳套装+美白精华+睡眠晚霜洗面奶+水乳套装+美白精华+睡眠晚霜洗面奶+水乳套装+美白精华+睡眠晚霜洗面奶+水乳套装+美白精华+睡眠晚霜</text>
						<text class="info_price_">￥399.00</text>
					</view>
				</view>
				
				<view class="buy_num">
					<text class="buy_num_title">购买数量</text>
					<view class="buy_num_content">
						<text class="buy_num_content_one add">＋</text>
						<text class="buy_num_content_one num">1</text>
						<text class="buy_num_content_one cut">-</text>
					</view>
				</view>
				
				<view class="build_order_">
					<text class="build_order_btn" @click="buildOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from './uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		computed: {
			listenBuyShop() {
		      return this.$store.state.buyShop
		    },
			listencloseBuyShop(){
				return this.$store.state.closeBuyShop
			}
		},
		watch: {
			//监听到用户点击购买
			listenBuyShop(e) {
				this.open()
			},
			//关闭购买弹窗
			listencloseBuyShop(e){
				this.colse()
			}
		},
		methods: {
			open(){
				uni.showLoading({
				    title: '加载中'
				});
				setTimeout(function () {
				    uni.hideLoading();
				}, 2000);
				this.$refs.popupBuy.open();
			},
			colse(){
				this.$refs.popupBuy.close();
			},
			//创建订单
			buildOrder(){
				this.colse()
				console.log("创建订单")
				uni.navigateTo({
					url:"/pages/index/homePage/orderDetail/orderDetail"
				})
			}
		}
	}
</script>

<style>
	.buy_info{
		width: 690upx;
		height: 745upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
		position: relative;
		padding: 55upx 30upx 40upx 30upx;
	}
	.close_icon{
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 18upx;
		right: 30upx;
	}
	.shop_info{
		display: flex;
		padding-bottom: 36upx;
		border-bottom: 2upx solid #F8F8F8;
	}
	.shop_info_icon{
		width: 176upx;
		height: 176upx;
		border-radius: 10upx;
	}
	.info_{
		margin-left: 30upx;
		height: 176upx;
	}
	.info_name_{
		display: block;
		font-size: 30upx;
		color: #343434;
		line-height: 32upx;
		margin-top: 18upx;
		width: 450upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.info_describe_{
		display: block;
		font-size: 26upx;
		color: #9A9A9A;
		line-height: 28upx;
		margin-top: 15upx;
		width: 450upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.info_price_{
		display: block;
		font-size: 30upx;
		color: #EA3F3F;
		line-height: 32upx;
		margin-top: 25upx;
	}
	.buy_num{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32upx;
	}
	.buy_num_title{
		font-size: 30upx;
		color: #343434;
		line-height: 32upx;
	}
	.buy_num_content{
		display: flex;
		align-items: center;
	}
	.buy_num_content_one{
		display: block;
		width: 54upx;
		height: 54upx;
		background-color: #F8F8F8;
		border-radius: 6upx;
		text-align: center;
	}
	.add{
		line-height: 54upx;
		font-size: 28upx;
		color: #666666;
	}
	.num{
		line-height: 54upx;
		font-size: 33upx;
		color: #666666;
		margin:  0 5upx;
	}
	.cut{
		line-height: 42upx;
		font-size: 57upx;
		color: #666666;
	}
	.build_order_{
		margin-top: 360upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.build_order_btn{
		display: block;
		width: 660upx;
		height: 88upx;
		background-color: #A676F7;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
</style>
